<template>
	<view class="product-detail">
		<!-- 产品图片 -->
		<swiper class="product-swiper" circular indicator-dots>
			<swiper-item v-for="(img, index) in images" :key="index">
				<image :src="img" mode="aspectFill" class="product-image" />
			</swiper-item>
		</swiper>

		<!-- 产品信息 -->
		<view class="product-info">
			<view class="product-header">
				<text class="product-name">{{ product.productName }}</text>
				<text class="product-price">￥{{ product.productPrice }}</text>
			</view>
			<text class="product-desc">{{ product.productDesc }}</text>

			<!-- 服务次数 -->
			<view class="service-times">
				<text class="label">服务次数</text>
				<text class="value">{{ product.serviceTimes }}次</text>
			</view>
		</view>

		<!-- 注意事项 -->
		<view class="notice-section">
			<view class="section-title">注意事项</view>
			<view class="notice-list">
				<view class="notice-item" v-for="(item, index) in notices" :key="index">
					<text class="dot">•</text>
					<text class="text">{{ item }}</text>
				</view>
			</view>
		</view>

		<!-- 操作流程 -->
		<view class="process-section">
			<view class="section-title">操作流程</view>
			<view class="process-steps">
				<view class="step-item" v-for="(step, index) in steps" :key="index">
					<view class="step-number">{{ index + 1 }}</view>
					<view class="step-content">
						<text class="step-title">{{ step.title }}</text>
						<text class="step-desc">{{ step.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button class="appointment-btn" @click="goToAppointment">立即预约</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config/config.js'
	
	
	export default {
		data() {
			return {
				productId: '',
				product: {},
				images:[],
				notices: [],
				steps: []
			}
		},
		onLoad(options) {
			if (options.id) {
				this.productId = options.id
				this.getNoticeAndSteps()
				this.getProductDetail()
			}
		},
		methods: {
			//获取全局注意事项和操作步骤信息
			async getNoticeAndSteps() {
				try {
					// 先从缓存中获取系统配置中的注意事项和操作步骤数据
					const noticeLists = uni.getStorageSync('noticeLists');
					const operateLists = uni.getStorageSync('operateLists');

					if (noticeLists) {
						console.log('从缓存获取系统配置注意事项:', noticeLists)
						// 如果有缓存数据，直接使用
						this.notices = noticeLists || []
					} else {
						//从后台获取注意事项并缓存本地
						const result = await this.$http.post(config.api.product.noticeLists)
						console.log('分类数据响应:', result)

						if (result.data.code === 200 || result.data.code == 201) {
							this.notices = result.data.data
							console.log('处理后的分类数据:', this.notices)
							uni.setStorageSync('noticeLists', this.notices)
						} else {
							uni.showToast({
								title: err.message || '获取系统配置注意事项失败',
								icon: 'none'
							})
						}
					}

					if (operateLists) {
						console.log('从缓存获取系统配置操作步骤:', operateLists)
						// 如果有缓存数据，直接使用
						this.steps = operateLists || []
					} else {
						//从后台获取注意事项并缓存本地
						const result = await this.$http.post(config.api.product.operateLists)
						console.log('分类数据响应:', result)

						if (result.data.code === 200 || result.data.code == 201) {
							this.steps = result.data.data
							console.log('处理后的分类数据:', this.steps)
							uni.setStorageSync('operateLists', this.steps)
						} else {
							uni.showToast({
								title: err.message || '获取系统配置操作步骤失败',
								icon: 'none'
							})
						}
					}
				} catch (err) {
					console.error('获取系统配置失败:', err)
					uni.showToast({
						title: err.message || '获取系统配置失败',
						icon: 'none'
					})
				}
			},
			async getProductDetail() {
				try {
					//后台接口查询产品详情信息
					const result = await this.$http.post(config.api.product.detail, {
						id: this.productId
					})

					console.log('产品详情响应:', result)

					if (result.data.code === 200 || result.data.code === 201) {
						this.product = result.data.data || {},
						this.images = this.product.productShowImg.split(",");
					} else {
						uni.showToast({
							title: '产品不存在',
							icon: 'none'
						})
					}
				} catch (e) {
					uni.showToast({
						title: '获取产品信息失败',
						icon: 'none'
					})
				}
			},
			goToAppointment() {
				uni.navigateTo({
					url: `/subpages/appointment/appointment?productId=${this.productId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-detail {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 120rpx;

		.product-swiper {
			height: 500rpx;

			.product-image {
				width: 100%;
				height: 100%;
			}
		}

		.product-info {
			background: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.product-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.product-name {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}

				.product-price {
					font-size: 40rpx;
					color: #FF6B00;
					font-weight: bold;
				}
			}

			.product-desc {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 20rpx;
			}

			.service-times {
				display: flex;
				align-items: center;

				.label {
					font-size: 28rpx;
					color: #666;
				}

				.value {
					font-size: 28rpx;
					color: #333;
					margin-left: 20rpx;
					font-weight: 500;
				}
			}
		}

		.notice-section,
		.process-section {
			background: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
		}

		.notice-list {
			.notice-item {
				display: flex;
				margin-bottom: 16rpx;

				.dot {
					color: #007AFF;
					margin-right: 10rpx;
				}

				.text {
					font-size: 28rpx;
					color: #666;
					flex: 1;
				}
			}
		}

		.process-steps {
			.step-item {
				display: flex;
				margin-bottom: 30rpx;

				.step-number {
					width: 40rpx;
					height: 40rpx;
					background: #007AFF;
					color: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-right: 20rpx;
				}

				.step-content {
					flex: 1;

					.step-title {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 8rpx;
					}

					.step-desc {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 20rpx 30rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			.appointment-btn {
				background: #007AFF;
				color: #fff;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				border: none;

				&:active {
					opacity: 0.8;
				}
			}
		}
	}
</style>